<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title></title>
  <script type='text/javascript' src='js/vue.js'></script>
</head>

<body>
  <div id='app'>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <input type="checkbox" v-model="item.flag" @input="addShopcar(item, $event)">
        <span>{{ '品牌 \t' + item.name }}</span>
        <span>{{ '单价 \t' + item.price }}</span>
        <span>
          <input type="button" value="-" @click="item.num--">
          <input type="text" v-model="item.num" style="width: 30px; text-align: center;">
          <input type="button" value="+" @click="item.num++">
        </span>
      </li>
    </ul>
    <p>总价 {{ total }}</p>
  </div>
  <script type='text/javascript'>
    var vm = new Vue({
      el: '#app',
      data: {
        items: [{
          id: 1,
          name: 'AJ',
          price: 100,
          num: 2
        }, {
          id: 2,
          name: '361',
          price: 200,
          num: 3
        }, {
          id: 3,
          name: 'step',
          price: 300,
          num: 2
        }, {
          id: 4,
          name: 'Converse',
          price: 400,
          num: 1
        }, {
          id: 5,
          name: 'uniqlo',
          price: 500,
          num: 2
        }, {
          id: 6,
          name: 'HM',
          price: 600,
          num: 5
        }],
        checkItem: [],
        totalPrice: 0,
      },
      methods: {
        addShopcar(item, e) {
          if (e.target.checked) {
            this.checkItem.push(item);
          } else {
            console.log(item);
            this.checkItem.forEach((element, i) => {
              if (element.id == item.id) {
                this.checkItem.splice(i, 1);
              }
            })
          }
        }
      },
      computed: {
        total() {
          console.log('computed');
          this.totalPrice = 0;
          this.checkItem.forEach(item => {
            if (item.flag) {
              this.totalPrice += (Number(item.num) * Number(item.price));
            }
          });
          this.aaa = 1;
          return this.totalPrice
        }
      },
    });
  </script>
</body>

</html>